<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部音频播放测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #1a1a1a;
            color: white;
        }
        
        .test-container {
            background: #2a2a2a;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
        }
        
        input[type="url"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #555;
            border-radius: 4px;
            background: #1a1a1a;
            color: white;
        }
        
        button {
            background: #1db954;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        
        button:hover {
            background: #1ed760;
        }
        
        button:disabled {
            background: #555;
            cursor: not-allowed;
        }
        
        .log {
            background: #111;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
        }
        
        .audio-controls {
            margin: 10px 0;
        }
        
        .status {
            padding: 5px;
            border-radius: 4px;
            margin: 5px 0;
        }
        
        .status.success { background: rgba(29, 185, 84, 0.2); color: #1db954; }
        .status.error { background: rgba(255, 69, 58, 0.2); color: #ff453a; }
        .status.warning { background: rgba(255, 159, 10, 0.2); color: #ff9f0a; }
    </style>
</head>
<body>
    <h1>🎵 外部音频播放测试</h1>
    
    <div class="test-container">
        <h3>测试URL</h3>
        <input type="url" id="urlInput" placeholder="输入音频URL" 
               value="https://music.163.com/song/media/outer/url?id=1355544039.mp3">
        
        <div class="audio-controls">
            <button onclick="testAudio()">🎵 测试播放</button>
            <button onclick="stopAudio()">⏹️ 停止</button>
            <button onclick="clearLog()">🗑️ 清空日志</button>
        </div>
        
        <div id="status" class="status"></div>
        
        <audio id="testAudio" controls style="width: 100%; margin: 10px 0;"></audio>
    </div>
    
    <div class="test-container">
        <h3>测试日志</h3>
        <div id="log" class="log"></div>
    </div>
    
    <script>
        const audio = document.getElementById('testAudio')
        const log = document.getElementById('log')
        const status = document.getElementById('status')
        
        function logMessage(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString()
            const logEntry = `[${timestamp}] ${message}\n`
            log.textContent += logEntry
            log.scrollTop = log.scrollHeight
            
            console.log(message)
        }
        
        function updateStatus(message, type = 'info') {
            status.textContent = message
            status.className = `status ${type}`
        }
        
        function testAudio() {
            const url = document.getElementById('urlInput').value
            
            if (!url) {
                updateStatus('请输入URL', 'error')
                return
            }
            
            logMessage('🔧 开始测试音频: ' + url)
            updateStatus('正在测试...', 'warning')
            
            // 清除之前的事件监听器
            audio.removeEventListener('loadstart', onLoadStart)
            audio.removeEventListener('canplay', onCanPlay)
            audio.removeEventListener('error', onError)
            audio.removeEventListener('loadedmetadata', onLoadedMetadata)
            
            // 添加事件监听器
            audio.addEventListener('loadstart', onLoadStart)
            audio.addEventListener('canplay', onCanPlay)
            audio.addEventListener('error', onError)
            audio.addEventListener('loadedmetadata', onLoadedMetadata)
            
            // 设置音频属性
            if (isExternalUrl(url)) {
                logMessage('🌐 识别为外部URL，设置跨域属性')
                audio.crossOrigin = 'anonymous'
                audio.preload = 'none'
            } else {
                logMessage('📁 识别为本地URL')
                audio.crossOrigin = 'use-credentials'
                audio.preload = 'auto'
            }
            
            // 设置音频源
            try {
                audio.src = url
                audio.load()
                logMessage('📡 音频开始加载...')
            } catch (error) {
                logMessage('❌ 设置音频源失败: ' + error.message)
                updateStatus('设置音频源失败', 'error')
            }
        }
        
        function stopAudio() {
            audio.pause()
            audio.currentTime = 0
            logMessage('⏹️ 音频已停止')
            updateStatus('音频已停止', 'info')
        }
        
        function clearLog() {
            log.textContent = ''
            updateStatus('日志已清空', 'info')
        }
        
        function isExternalUrl(url) {
            const externalDomains = [
                'music.163.com',
                'y.qq.com',
                'stream.qqmusic.qq.com',
                'kugou.com',
                'kuwo.cn',
                'soundcloud.com',
                'spotify.com'
            ]
            
            return externalDomains.some(domain => url.includes(domain))
        }
        
        // 事件处理器
        function onLoadStart() {
            logMessage('📥 开始加载音频数据')
            updateStatus('正在加载...', 'warning')
        }
        
        function onCanPlay() {
            logMessage('✅ 音频可以播放')
            updateStatus('音频可以播放 - 测试成功！', 'success')
        }
        
        function onError(event) {
            const error = event.target.error
            let errorMsg = '❌ 音频加载错误'
            
            if (error) {
                errorMsg += ': '
                switch (error.code) {
                    case 1: errorMsg += 'MEDIA_ERR_ABORTED (用户中止)'; break;
                    case 2: errorMsg += 'MEDIA_ERR_NETWORK (网络错误)'; break;
                    case 3: errorMsg += 'MEDIA_ERR_DECODE (解码错误)'; break;
                    case 4: errorMsg += 'MEDIA_ERR_SRC_NOT_SUPPORTED (不支持的格式)'; break;
                    default: errorMsg += '未知错误 (code: ' + error.code + ')'; break;
                }
            }
            
            logMessage(errorMsg)
            updateStatus('音频加载失败', 'error')
        }
        
        function onLoadedMetadata() {
            logMessage('📊 音频元数据加载完成')
            logMessage(`⏱️ 时长: ${audio.duration.toFixed(2)}秒`)
        }
        
        // 页面加载完成时的初始化
        logMessage('🚀 音频测试工具已准备就绪')
        updateStatus('请输入音频URL并点击测试', 'info')
    </script>
</body>
</html> 